<template>
    <div class="select-ti-no">
        <el-dialog draggable :close-on-click-modal="false" title="选择送检单" v-model="dialogVisibleTi" width="60%"
            :before-close="handleCloseTiEv">
            <div class="ti">
                <div class="left">
                    <div class="itm">开始日期</div>
                    <div><el-date-picker style="width: 100%;" v-model="tableObjData.sta_dd" :clearable="false"
                            type="date" placeholder="Pick a day" /></div>
                    <div class="itm">开始日期</div>
                    <div><el-date-picker style="width: 100%;" v-model="tableObjData.end_dd" :clearable="false"
                            type="date" placeholder="Pick a day" /></div>
                    <div class="itm">物料编码</div>
                    <div>
                        <el-input style="width: 100%;" v-model="tableObjData.prd_no" :clearable="false"
                            placeholder="物料编码" />
                    </div>
                    <div class="itm">物料名称</div>
                    <div>
                        <el-input style="width: 100%;" v-model="tableObjData.prd_name" :clearable="false"
                            placeholder="物料名称" />
                    </div>
                    <div class="itm">物料规格</div>
                    <div>
                        <el-input style="width: 100%;" v-model="tableObjData.spc" :clearable="false" placeholder="规格" />
                    </div>
                    <div class="itm">供应厂商</div>
                    <div>
                        <el-input style="width: 100%;" v-model="tableObjData.cus_name" :clearable="false"
                            placeholder="供应厂商名称" />
                    </div>
                    <div class="itm">送检单号</div>
                    <div>
                        <el-input style="width: 100%;" v-model="tableObjData.ti_no" :clearable="false"
                            placeholder="送检单号" />
                    </div>
                    <div class="itm" style="height: 10px;"></div>
                    <div><el-button type="primary" style="width: 100%;" @click="getEv(true)">查询</el-button></div>
                </div>
                <div class="right">
                    <div style="width: 100%; height: calc(100% - 50px);">
                        <el-table @row-dblclick="rowDblclickEv" empty-text="暂无数据" :row-style="{ cursor: 'pointer' }" border
                            height="100%" style="width: 100%;" :data="tableListData">
                            <el-table-column align="center" type="index" label="#" width="50" />
                            <el-table-column align="center" show-overflow-tooltip header-align="center" prop="ti_no"
                                label="送检单号" width="120" />
                            <el-table-column align="center" show-overflow-tooltip header-align="center" prop="ti_dd"
                                label="送检日期" width="100" />
                            <el-table-column align="center" show-overflow-tooltip header-align="center" prop="prd_no"
                                label="物料编码" width="150" />
                            <el-table-column align="center" show-overflow-tooltip header-align="center" prop="prd_name"
                                label="物料名称" width="150" />
                            <el-table-column align="center" show-overflow-tooltip header-align="center" prop="ut"
                                label="单位" width="80" />
                            <el-table-column align="center" show-overflow-tooltip header-align="center" prop="qty"
                                label="送检数量" width="100" />
                            <el-table-column align="center" show-overflow-tooltip header-align="center" prop="qty_rtn"
                                label="已检验量" width="100" />
                            <el-table-column align="center" show-overflow-tooltip header-align="center" prop="spc"
                                label="物料规格" width="250" />
                            <el-table-column align="center" show-overflow-tooltip header-align="center" prop="cus_name"
                                label="供应厂商" width="200" />
                            <el-table-column align="center" show-overflow-tooltip header-align="center" prop="rem"
                                label="备注" />
                        </el-table>
                    </div>
                    <div style="height: 50px;">
                        <pagination v-show="tableObjData.total > 0" :total="tableObjData.total"
                            v-model:page="tableObjData.page" v-model:limit="tableObjData.pageSize"
                            @pagination="getEv(true)" />
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
// import { TimerTaskListGet } from '@/api/setting/timerTask/index.js'
import { BasicMftiBilListGet } from '@/api/basic/index.js'
import { formatDate } from '@/utils/formatTime.js'
import { ref, reactive, onMounted, onActivated } from 'vue'
import { loadingStore } from '@/stores/index.js'

const emit = defineEmits(['getBilDataEv'])
// 顶部菜单数据
const loading = loadingStore()

const dialogVisibleTi = ref(false)
const tableListData = ref([])

let tableObjData = reactive({
    sta_dd: new Date(),
    end_dd: new Date(),
    prd_no: '',
    prd_name: '',
    spc: '',
    ti_no: '',
    cus_name: '',
    label__like: '',
    page: 1,
    total: 0,
    has_next: false,
    has_prev: false,
    pages: 0,
    pageSize: 20
})

onMounted(() => {

})
onActivated(() => {

})

// 查询数据
const getEv = async (msg) => {
    loading.loading = true
    tableObjData.sta_dd = formatDate(tableObjData.sta_dd, 'YYYY-mm-dd')
    tableObjData.end_dd = formatDate(tableObjData.end_dd, 'YYYY-mm-dd')
    console.log(tableObjData)
    try {
        let arr_data = await BasicMftiBilListGet(tableObjData)
        if (arr_data.status != 200) {
            return
        }
        if (msg == true) {
            ElMessage.success('查询成功')
        }
        console.log(arr_data.data)
        tableListData.value = arr_data.data.result.data
        tableObjData.total = arr_data.data.result.total
        tableObjData.has_next = arr_data.data.result.has_next
        tableObjData.has_prev = arr_data.data.result.has_prev
        tableObjData.pages = arr_data.data.result.pages
        tableObjData.pageSize = arr_data.data.result.pageSize

    } catch (error) {
        ElMessage.error('查询接口请求失败' + error)
    } finally {
        loading.loading = false
    }
}

const rowDblclickEv = async (row) => {
    emit("getBilDataEv", row)
    dialogVisibleTi.value = false
 
}

const handleCloseTiEv = (done) => {
    done();
}

defineExpose({
    dialogVisibleTi
})

</script>

<style lang='less' scoped>
.ti {
    height: 500px;
    display: flex;

    .left {
        width: 200px;
        // background-color: pink;
        padding: 5px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;

        .itm {
            height: 30px;
            line-height: 30px;
            padding-left: 5px;
            box-sizing: border-box;
        }
    }

    .right {
        width: calc(100% - 200px);
        border: 1px solid #dcdfe6;
        border-left: none;
        box-sizing: border-box;
        // background-color: red;
    }
}
</style>